<template>
	<view>
		
		<!-- 顶部滚动选项卡 start -->
		<scroll-view scroll-x="true" class="king-scroll-row bg-white king-height-100" :scroll-into-view="scorollInto" scroll-with-animation="true" show-scrollbar="false">
			<view v-for="(tab, tabIndex) in scrollTabs" :key="tabIndex" class="king-scroll-row-item king-padding-x-30 king-padding-y-20 king-font-md" :id="'tab_'+tabIndex" :class="activeTabIndex === tabIndex ? 'active-font king-font-lg king-font-weight-bold' : ''" @tap="changeTab(tabIndex)">{{tab.name}}</view>
		</scroll-view>
		<!-- 顶部滚动选项卡 end -->
		
		<!-- 滑动切换内容区域 start -->
		<swiper :indicator-dots="false" :autoplay="false" :duration="150" :current="activeTabIndex" @change="onChangeTab" :style="'height:'+contentBoxHeight+'px;'">
			<swiper-item v-for="(content, contentIndex) in contentList" :key="contentIndex">
				
				<!-- 竖向滚动区域显示内容 start -->
				<scroll-view scroll-y="true" :style="'height:'+contentBoxHeight+'px;'" @scrolltolower="loadMoreData(contentIndex)">
					
					<!-- 列表有数据时显示区域 start -->
					<template v-if="content.list.length > 0">
						
						<!-- 内容列表区域 start -->
						<block v-for="(list, listIndex) in  content.list" :key="listIndex">
							<!-- 公共列表组件，用于渲染页面列表 -->
							<common-list :item="list" :index="listIndex" @follow="follow" @doSupport="doSupport"></common-list>
						</block>
						<!-- 内容列表区域 end -->
						
						
						
						<!-- 上拉加载 start -->
						<load-more :state="content.loadMoreState"></load-more>
						<!-- 上拉加载 end -->
					
					</template>
					<!-- 列表有数据时显示区域 end -->
					<!-- 列表无数据时显示区域 start -->
					<template v-else>
						<no-thing></no-thing>
					</template>
					<!-- 列表无数据时显示区域 end  -->
					
				</scroll-view>
				<!-- 竖向滚动区域显示内容 end -->
				
			</swiper-item>
		</swiper>
		<!-- 滑动切换内容区域 end -->
		
	</view>
</template>

<script>
	// 虚拟数据
	const demoData = [
		{
			nickName: "小柒君",
			avatar: "/static/demo/userpic/12.jpg",
			addTime: "2021-04-06 下午09:48",
			isFollow: false,
			content: "来呀！快活呀！反正有大把时光！",
			pictures: "/static/demo/datapic/zp.png",
			support: {
				status: true,
				total: 987
			},
			commentTotal: 576
		},
		{
			nickName: "Gally",
			avatar: "/static/demo/userpic/10.jpg",
			addTime: "2021-04-05 上午11:25",
			isFollow: true,
			content: "你好，夏天！",
			pictures: "/static/demo/datapic/hello.png",
			support: {
				status: false,
				total: 0
			},
			commentTotal: 0
		},
		{
			nickName: "简妮丝",
			avatar: "/static/demo/userpic/19.jpg",
			addTime: "2021-04-03 下午02:12",
			isFollow: false,
			content: "说走就走！",
			pictures: "/static/demo/datapic/15.jpg",
			support: {
				status: true,
				total: 283
			},
			commentTotal: 13
		},
		{
			nickName: "Nicholas",
			avatar: "/static/demo/userpic/7.jpg",
			addTime: "2021-04-02 上午08：29",
			isFollow: false,
			content: "你说再美的烟火，灿烂也只是瞬间，转眼消失不见！",
			pictures: "/static/demo/datapic/14.jpg",
			support: {
				status: false,
				total: 829
			},
			commentTotal: 1980
		},
		{
			nickName: "雅漾",
			avatar: "/static/demo/userpic/4.jpg",
			addTime: "2021-04-01 上午07：38",
			isFollow: false,
			content: "人生总是在路上！",
			pictures: "/static/demo/datapic/28.jpg",
			support: {
				status: true,
				total: 23
			},
			commentTotal: 3
		}
	];
	
	import commonList from "@/components/common/common-list.vue"; // 引入公共列表组件
	import loadMore from "@/components/common/load-more.vue"; // 引入上拉加载组件
	export default {
		components: {
			commonList,
			loadMore
		},
		data() {
			return {
				contentBoxHeight: 600, // 设置内容区域初始高度
				
				// 顶部滚动选项卡
				scorollInto: "",  // 滚动选项卡子元素标识（用于指定滚动到的子元素id）
				activeTabIndex: 0, // 当前选中的选项卡子元素（用于判断当前元素是否选中）
				// 滚动选项卡列表
				scrollTabs:[
					{
						name: "关注"
					},
					{
						name: "推荐"
					},
					{
						name: "体育"
					},
					{
						name: "热点"
					},
					{
						name: "财经"
					},
					{
						name: "军事"
					},
					{
						name: "历史"
					},
					{
						name: "本地"
					},
				],
				
				// 滑动区域内容列表
				contentList: [],
			}
		},
		
		// 点击导航栏搜索框(监听原生标题搜索输入框点击事件)
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'../search/search',
			})
		},
		
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'../publish/publish',
			})
		},
		
		onLoad() {
			// 获取系统信息
			uni.getSystemInfo({
				success: res => {
					// 计算内容区域高度（内容区域高度 = 窗口高度 - 顶部滑动选项卡高度）
					this.contentBoxHeight = res.windowHeight - uni.upx2px(100);
				}
			});
			
			// 根据选项生成列表
			this.getListData();
		},
		methods: {	
			// 获取列表数据
			getListData() {
				var contentListArr = []; // 临时内容列表数组
				// 根据滚动选项卡数量动态生成相应的列表数据
				for (let i = 0; i < this.scrollTabs.length; i++) {
					// 组装列表对象
					let contentListObj = {
						loadMoreState: 1, // 上拉加载状态：0-没有更多了 1-上拉加载更多 2-加载中
						list:[]
					}
					
					// 前两个 tab 选项卡显示数据
					if (i < 2) {
						contentListObj.list = demoData;
					}
					
					// 将列表对象压入列表数组
					contentListArr.push(contentListObj);
				}
				this.contentList = contentListArr; // 将列表数据赋值给 contentList
			},
			
			// 切换滚动选项卡
			changeTab(tabIndex) {
				// 如果当前元素已选中
				if (this.activeTabIndex === tabIndex) {
					return;
				} 
				this.activeTabIndex = tabIndex; // 将当前元素的索引设置为已选中
				
				// 滚动到选中的子元素
				this.scorollInto = "tab_" + tabIndex;
			},
			
			// 监听滑动
			onChangeTab(e) {
				// 切换滚动选项卡
				this.changeTab(e.detail.current);
			},
			
			// 上拉加载更多
			loadMoreData(contentIndex) {
				// 拿到当前对象
				let item = this.contentList[contentIndex];
				
				// 判断是否处于可加载状态(上拉加载更多)
				if (1 !== item.loadMoreState) {
					return false;
				}
				
				// 修改当前滑动内容区域上拉加载状态
				item.loadMoreState = 2;
				
				// 模拟数据请求
				setTimeout(()=>{
					// 加载数据
					item.list = [...item.list,...item.list]
					// 恢复加载状态
					item.loadMoreState = 1;
				}, 2000);
			},
			
			// 关注
			follow(e) {
				this.list[e].isFollow = true;
				uni.showToast({
					title: '关注成功！'
				});
			},
			
			// 点赞/取消赞
			doSupport(e) {
				let status = this.list[e].support.status; // 原点赞状态
				let msg = status === true ? '取消赞成功' : '点赞成功'; // 操作提示
				this.list[e].support.status = !status;		// 更改点赞状态
				status ? this.list[e].support.total-- : this.list[e].support.total++; // 更改点赞数
				uni.showToast({
					title: msg
				});
			}
		}
	}
</script>

<style>
	
</style>
